<template>
    <div class="navigate-content">
        <div class="main-content">
            <components :is="curContent"></components>
        </div>
        <div class="footer">
            <ul>
                <li
                v-for="(item,index) in pages"
                :key="index"
                @click="changeContent(index)"
                >
                {{item.title}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import xingqiu from '../components/Square.vue'
import square from '../components/Square.vue'
import chatList from '../components/chat.vue'
import myself from '../components/Myself.vue'
export default {
    components:{
        square,
        myself,
        chatList
    },
    data() {
        return {
            pages:['星球','广场','聊天','自己'],
            pages:[
                {
                    name:'xingqiu',
                    title:'首页'
                },
                {
                    name:'square',
                    title:'广场'
                },
                {
                    name:'chatList',
                    title:'聊天'
                },
                {
                    name:'myself',
                    title:'自己'
                },
            ],
            curContent:'square'
        }
    },
    methods:{
        changeContent(index){
            this.curContent = this.pages[index].name
        }
    }
}
</script>
<style lang="less">
    .footer>ul{
        height: 80px;
        width: 100%;
        border-top: 1px solid black;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        line-height: 80px;
    }
</style>